<script setup>
import FileList from './components/FileList.vue'
import { ref } from 'vue'
import { dialogStatus } from './store/store.js';
import axios from 'axios';
import { ElMessage } from 'element-plus';

import { updateStatus } from './store/status.js';

// 读取存储的数据
let status = updateStatus()
// 读取存储的数据
let dialog = dialogStatus()

let newFile = ref({
  name: '',
  type: 1, // 1: 文件夹, 2: 文件
  fatherId: {
    type: Number,
    default: 0
  } // 父级文件夹ID
})

function handleOp() {
  dialog.show = false;
  if (dialog.op === 1) {
    // 新建子文件
    //debugger
    newFile.value.fatherId = dialog.id;
    // 发送请求创建新文件
    axios.post('http://localhost:8081/file', newFile.value)
      .then(response => {
        if (response.data.success) {

          status.reshId = dialog.id;
          status.needfresh = true;

          ElMessage.success('新建成功');
          dialog.show = false;
        } else {
          ElMessage.error('新建失败');
        }
      })
      .catch(error => {
        console.error('Error creating file:', error);
      });
  } else if (dialog.op === 2) {
    // 修改文件名
    newFile.value.id = dialog.id; // 确保传递ID以更新正确的文件
    newFile.value.fatherId = null; // 保持父级ID不变
    newFile.value.type = null; // 保持类型不变

    axios.put(`http://localhost:8081/file`, newFile.value)
      .then(response => {
        if (response.data.success) {
          // debugger
          status.reshId = dialog.fatherId;
          status.needfresh = true;
          ElMessage.success('修改成功');
          dialog.show = false;
        } else {
          ElMessage.error('修改失败');
        }
      })
      .catch(error => {
        console.error('Error updating file:', error);
      });
      
  }
}


// 增加1 修改2
</script>

<template>
  <div>
    <el-button type="primary" @click="dialog.show=true; dialog.op=1; dialog.fatherId=0"> 新建文件</el-button>

    <FileList  :fatherId="0" />

    <el-dialog v-model="dialog.show" :title="dialog.op == 1 ? '新建子文件' : '修改文件名'" width="500" class="dialog">
      <div class="file-name">{{ dialog.name }}</div>
      <el-form :model="dialog.form" ref="form" label-width="80px">
        <el-form-item label="文件名">

          <el-input v-model="newFile.name" placeholder="请输入文件名"></el-input>


        </el-form-item>
        <el-form-item label="类型" v-if="dialog.op === 1">
          <el-select v-model="newFile.type" placeholder="请选择文件类型">
            <el-option label="文件夹" value="1"></el-option>
            <el-option label="文件" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialog.show = false">Cancel</el-button>
          <el-button type="primary" @click="handleOp">
            Confirm
          </el-button>
        </div>
      </template>

    </el-dialog>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
